<template>
 <div id="head" class="head">
  <h2>AED管理系统</h2>
  <div class="center">
    <div v-for="item in countList" :key="item.name" class="count">
      <span class="name">{{ item.name }}</span>
      <span class="countNum">{{ item.count }} <span class="unit">{{ item.unit }}</span></span>
    </div>
  </div>
  <div class="right" id="time">
    <span class="week">{{ week }}</span>
    <span class="time">{{ time }}</span>

  </div>

 </div>
</template>
<script>
export default {
  name: 'HeadView',
  data () {
    return {
      week:'',
      year: this.$store.state.year,
      time:'',
      countList: [{
        name: 'AED总台数',
        count: '19467',
        unit:'台'
      }, {
         name: '呼救总次数',
        count: '1073',
        unit: '次'
      }, {
        name: '志愿者总人数',
        count: '41565',
        unit: '人'
      }, {
        name: '运营总天数',
        count: '1958',
        unit: '天'
      }]
    }
  },
  watch:{
    "year"(a){
      console.log(a)
      this.$store.commit('setYear',a)
    }
  },
  props: {
  },
  components: {
  },
  mounted() {
    setInterval(this.updateTime, 1000);
  },
  methods:{ 
       updateTime() {
          var date = new Date() // 获取时间
      var year = date.getFullYear() // 获取年
      var month = date.getMonth() + 1 // 获取月
      var strDate = date.getDate() // 获取日
      // var day = date.getDate() //
      var day = '日一二三四五六'.charAt(new Date().getDay()) // 周一返回的是1，周六是6，但是周日是0
      var hour = date.getHours() // 获取小时
      var minute = date.getMinutes() // 获取分钟
      var second = date.getSeconds() // 获取秒
      // 由于部分业务处理 是需要月份日份前面有0 故新增一个函数
      this.getNum()
      this.time= year +  '-' + this.getNum(month) +  '-' + this.getNum(strDate)  +'     '+ hour +':'+ minute +'：' + second
      this.week= '星期' + day
        // console.log(document.getElementById("time").textContent)
    },
    getNum(i) {
      return i < 10 ? '0' + i : i
    },
  }

}
</script>
<style scoped>
.head
{
  padding: 20px 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;

}
.center{
  display: flex;
  color:#fff;
  width: 30%;
  justify-content: space-between;
}
.name{
  margin-bottom: 10px;
  font-size: 18px;
}
.countNum{
  font-size: 20px;
  font-weight: 600;
}
.unit{
  font-size: 14px;
}
.right{
  color: #fff;
  line-height: 50px;
}
.week{
  margin-right: 20px;
}


</style>


<style>
:root{
  --el-bg-color-overlay:#011948FF !important;
  --el-border-color-light:#1257C9FF !important;
  /* --el-fill-color-light: */
}
h2{
	background-image: linear-gradient(to bottom, #ddf7ff, #afecff);
	color: transparent;
	-webkit-background-clip: text;
  font-size: 30px;
  margin: 0;
}
.count{
  display: flex;
  flex-direction: column;
}
</style>
